<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入样式-->
    <link rel="stylesheet" type="text/css" href="../easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <!--jquery-->
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <!--easyUI-->
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script src="../easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<!--js-->
<script>
    <!--模拟easyui给组件添加样式-->
    $(function () {
        $("#myTable").datagrid({
            url: 'emp_datagrid.json',
            sortName: "inputTime",
            toolbar: "#toolbar",
            fitColumns: true,
            singleSelect: true,
            striped: true,
            pagination: true,
            pageSize: 20,
            fit: true,
            rownumbers:true,
            columns: [[
                {field: 'id',hidden:true},
                {field: 'name', title: '名称', width: 100},
                {field: 'email', title: '邮箱', width: 100},
                {
                    field: 'dept', title: '部门', width: 100, formatter: function (value, row, index) {
                        return value ? value.name : "";
                    }
                },
                {field: 'age', title: '年龄', width: 100},
                {field: 'inputTime', title: '入职时间', width: 100, sortable: true},
                {field: 'tel', title: '电话', width: 100},
                {
                    field: 'state', title: '在职状态', width: 100, formatter: function (value, row, index) {
                        return value ? "<font color='green'>在职</font>" : "<font color='red'>离职</font>";
                    }
                }

            ]]
        });
        //    初始化弹出框
        $("#emp-dialog").dialog({
            title: "编辑",
            height: 400,
            width: 320,
            closed: true,
            buttons:'#dialog-btn',
            onClose:function () {
                //清空表单数据
                $("#emp-form").form('clear');
            }
        })
    });
    function add() {
        //设置标题
        $("#emp-dialog").dialog('setTitle','新增员工');
        //打开弹出框
        $("#emp-dialog").dialog('open');
    }
    function edit() {
        //判断是否选中一条数据
        var row = $("#myTable").datagrid('getSelected');
        if (!row) {
            //如果没有数据则,弹出框提示
            $.messager.alert('温馨提示','至少选择一条数据','warning');
            return;
        }
        //设置标题
        $("#emp-dialog").dialog('setTitle','编辑员工');
        //打开弹出框
        $("#emp-dialog").dialog('open');
        //编辑回显 -- 调用from的加载数据方法
        //处理特殊属性
        row["dept.id"] = row.dept.id;
        $("#emp-form").form('load',row);
    }
    function del() {
        //判断是否选中一条数据
        var row = $("#myTable").datagrid('getSelected');
        if (!row) {
            //如果没有数据则,弹出框提示
            $.messager.alert('温馨提示','至少选择一条数据','warning');
            return;
        }
        //发送请求删除 (创建参数 -> 当前行的id)
        $.post('employee_delete.json',{id:row.id},function (data) {
            if (data.success) {
                $.messager.alert('温馨提示',data.msg,'info',function () {
                    //刷新表格
                    $("#myTable").datagrid("reload")
                });
            }else{
                $.messager.alert('温馨提示',data.msg,'warning');
            }
        })
    }
    function load() {
        //刷新的方法
        $("#myTable").datagrid("load");
    }
    function save() {
        //ajax提交表单
        $("#emp-form").form('submit',{
            url:'employee_saveOrUpdate.json',
            success:function (data) {
                data = $.parseJSON(data)
                if (data.success) {
                    $.messager.alert('温馨提示',data.msg,'info',function () {
                        //刷新当前界面
                        $("#myTable").datagrid("reload");
                        cancel();
                    });
                }else{
                    $.messager.alert('温馨提示',data.msg,'warning',function () {
                        cancel();
                    });
                }
            }
        })

    }
    function cancel() {
        //关闭弹出框
        $("#emp-dialog").dialog('close');

    }
    function searching(){
        //获取所有输入框中的内容
        var keyword = $("#keyword").textbox('getValue');
        var beginDate = $("#beginDate").textbox('getValue');
        var endDate = $("#endDate").textbox('getValue');

        //加载表格,附带参数
        $("#myTable").datagrid('load',{
            keyword:keyword,
            beginDate:beginDate,
            endDate:endDate
        })
    }

</script>

<table id="myTable"></table>
<!--按钮-->
<div id="toolbar">
    <a class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="add()">新增</a>
    <a class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit()">编辑</a>
    <a class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="del()">删除</a>
    <a class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="load()">刷新</a>

        <!--高级查询-->
        <input id="keyword" name="keyword" class="easyui-textbox" prompt="请输入姓名" />
        <input id="beginDate" name="beginDate" class="easyui-datebox" prompt="起始日期" /> -
        <input id="endDate" name="endDate" class="easyui-datebox" prompt="结束时间" />
        <a class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="searching()"></a>
</div>
<!--弹出框-->
<div id="emp-dialog">
    <form id="emp-form">
        <table align="center" style="margin-top:15px;">
            <tr>
                <td>名称</td>
                <td><input class="easyui-textbox" name="name"></td>
            </tr>
            <tr>
                <td>邮箱</td>
                <td><input class="easyui-textbox" name="email"></td>
            </tr>
            <tr>
                <td>部门</td>
                <td><input class="easyui-combobox" name="dept.id"
                           data-options="url:'dept.json',valueField:'id',textField:'name',panelHeight:'auto'"></td>
            </tr>
            <tr>
                <script>
                    $.extend($.fn.validatebox.defaults.rules, {
                        age: {
                            validator: function(value,param){
                                return value >= param[0] && value <= param[1];
                            },
                            message: '年龄要在1~100之间'
                        }
                    });
                </script>
                <td>年龄</td>
                <td><input class="easyui-textbox" name="age" data-options="validType:'age[1,100]'"></td>
            </tr>
            <tr>
                <td>入职时间</td>
                <td><input class="easyui-datetimebox" name="inputTime"></td>
            </tr>
            <tr>
                <td>电话</td>
                <td><input class="easyui-textbox" name="tel"></td>
            </tr>
            <tr>
                <td>在职状态</td>
                <td><input class="easyui-combobox" name="state"
                           data-options="data:[{value:1,state:'在职'},{value:0,state:'离职'}],
                           valueField:'value',textField:'state',panelHeight:'auto'" ></td>
            </tr>
        </table>
    </form>
</div>
    <!--弹出框按钮-->
    <div id="dialog-btn">
        <a class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="save()">保存</a>
        <a class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="cancel()">取消</a>
    </div>
</body>
</html>